<template>
    <div class="designer">
        <a-form 
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 19 }"
            autocomplete="off"
            style="height: 100%;"
        >
            <draggable
                :list="props.widgets"
                tag="ul"
                item-key="key"
                animation="300"
                :group="{name: 'dragGroup'}"
                ghost-class="ghost-class"
                chosen-class="chosen-class"
                drag-class="drag-class"
            >
                <template #item="{element}">
                    <li 
                        class="widget-item" 
                        :class="{
                            select:props.designer.curWidget.value?.id === element.id
                        }"
                    >       
                        <DragOutlined 
                            class="opt p-1"
                            :class="{
                                'select-opt':props.designer.curWidget.value?.id == element.id
                            }"
                        />
                        <a-popconfirm
                            title="确定删除？"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="deleteWidget(element)"
                        >
                            <DeleteOutlined 
                                class="del-opt p-1"
                                :class="{
                                    'select-del-opt':props.designer.curWidget.value?.id == element.id
                                }"
                            />
                        </a-popconfirm>
                        <component
                            :is="getWidgetType(element)"
                            :widget="element"
                            :designer="designer"
                        />
                    </li>
                </template>
            </draggable>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import type { BaseWidgetType, DesignerType } from '@/xyFDesigner/type';
import { ref, watch } from 'vue';
import draggable from 'vuedraggable'

const props = withDefaults(defineProps<{
    designer:DesignerType,
    widgets:BaseWidgetType[]
}>(),{})

const getWidgetType = (widget:BaseWidgetType)=>{
    return 'xy-' + widget.type
}

const deleteWidget = (widget:any)=>{
    props.designer.deleteWidget(widget)
}
</script>

<style lang='scss' scoped>
.empty-tip{

}
.designer {
    height: calc(100vh - 100px);
    background-color: #f2f3f5;
    user-select: none;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 10px;
    ul{
        height: 100%;
        margin:0;
    }
    .widget-item{
        margin-bottom: 5px;
        border:1px solid transparent ;
        transition: all .3s ease;
        position: relative;
        background-color: #fff;
        .opt{
            position: absolute;
            top:0;
            left:0;
            z-index: 99999;
            cursor: pointer;
            background-color: #3370ff;
            color:#fff;
            opacity: 0;
            transition: all .3s;
            border-bottom-right-radius: 5px;
            &.select-opt{
                opacity: 1;
            }
        }
        .del-opt{
            z-index: 99999;
            position: absolute;
            bottom:0;
            right:0;
            cursor: pointer;
            background-color: #3370ff;
            color:#fff;
            opacity: 0;
            transition: all .3s;
            border-top-left-radius: 5px;
            &.select-del-opt{
                opacity: 1;
            }
        }
        &:hover{
            border:1px solid #6392c5 ;
        }
        &.select{
            border: 1px solid #3370ff;
        }
    }
    
    // 拖拽过渡效果相关类
    .ghost-class {
        opacity: 0.5;
        background: #c8ebfb;
        border: 1px dashed #3370ff !important;
    }
    
    .chosen-class {
        background: #e0f7fa;
        border: 1px solid #26c6da !important;
    }
    
    .drag-class {
        transform: rotate(2deg);
        transition: transform 0.2s ease;
    }
    &::-webkit-scrollbar {
        width: 6px;
        background: transparent;
        opacity: 0;
        transition: opacity 0.3s;
    }

    &:hover::-webkit-scrollbar {
        opacity: 1;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
        border-radius: 4px;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    &:hover::-webkit-scrollbar-thumb {
        background-color: #a19e9e;

        &:hover {
            background-color: #ccc;
        }
    }
}
</style>